<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>计算长方形的周长和面积</title>
</head>
<body>
<div>长方形的长:<input id="height" type="text" value=""></div></br>
<div>长方形的宽:<input id="width" type="text" ></div></br>
<div>长方形的周长:<input id="cir" type="text" ></div></br>
<div>长方形的面积:<input id="area" type="text" ></div>
<script type="text/javascript">
    /**
     * @Description:
     * @author 朱志文
     * @date 2021/9/17
     */
    /*prompt 弹框输入*/
    var height=prompt("请输入长方形的长");
    var width=prompt("请输入长方形的宽");
    cir=height*2+width*2;
    area=height*width;
    /*将字符串转化为数值的一个判断操作 若不是数值贼返回NaN*/
    /*parseFloat() 函数可解析一个字符串，并返回一个浮点数。
    该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
    Number() 函数把对象的值转换为数字。
    如果对象的值无法转换为数字，那么 Number() 函数返回 NaN。但是Ture和False为1和0
    */
    height=parseFloat(height)&&Number(height);
    width=parseFloat(width)&&Number(width);
    /*判断用户输入的是否是数值*/
    if (!isNaN(height)&&!isNaN(width)){
        var Cheight=document.getElementById("height").value=height;
        document.getElementById("width").value=width;
        document.getElementById("cir").value=cir;
        document.getElementById("area").value=area;
    }else if (!isNaN(width)){
        alert("请输入正确数字的长")
    }else if (!isNaN(height)){
        alert("请输入正确数字的宽")
    }else {
        alert("请输入正确数字的长和宽")
    }
</script>
</body>
</html>